<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
  ul {
    list-style: none;
  }
  tr {
    height: 40px;
    border-bottom: 1px solid #201e1e;
  }
  th,
  td {
    padding: 10px 30px;
  }
</style>
<div id="app">
  <table>
    <thead>
      <tr>
        <th>勾选</th>
        <th>照片</th>
        <th>商品</th>
        <th>数量</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in cart" :key="item.id">
        <td>
          <input type="checkbox" :checked="item.is" @click="dan(index)" />
        </td>
        <td><img :src="item.img" style="width: 100px" /></td>
        <td>{{item.name}}</td>
        <td>
          <button @click="jian(index)">-</button>
          {{item.num}}
          <button @click="jia(index)">+</button>
        </td>
        <td>{{item.price | fn('￥')}}</td>
        <td><button @click="del(index)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <input type="checkbox" @click="all()" />全选
  <span :style="sty">总价：{{zong | fn('￥')}}</span
  ><button @click="suan()">结算</button>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      sty: "margin-left: 240px;",
      zong: 0,
      cart: [
        {
          id: 1,
          name: "小米13",
          img: "./img/biu.jpg",
          price: 4599,
          is: false,
          num: 1,
        },
        {
          id: 2,
          name: "红米k50",
          img: "./img/fighting.jpeg",
          price: 2399,
          is: false,
          num: 1,
        },
        {
          id: 3,
          name: "小米14",
          img: "./img/hope.jpeg",
          price: 1999,
          is: false,
          num: 1,
        },
      ],
    },
    methods: {
      // 总价
      suan() {
        console.log(this.cart);
      },
      //   数量加1
      jia(index) {
        this.cart[index].num++;
        this.zong += this.cart[index].price * this.cart[index].num;
      },
      // 数量减1
      jian(index) {
        if (this.cart[index].num > 1) {
          this.cart[index].num--;
          this.zong -= this.cart[index].price * this.cart[index].num;
        }
      },
      // 删除
      del(index) {
        this.cart.splice(index, 1);
        this.zong -= this.cart[index].price * this.cart[index].num;
      },
      // 全选
      all() {
        this.zong = 0;
        for (let i = 0; i < this.cart.length; i++) {
          this.cart[i].is = !this.cart[i].is;
          if (this.cart[i].is) {
            this.zong += this.cart[i].price * this.cart[i].num;
          }
        }
      },
      //  单个价格
      dan(index) {
        this.cart[index].is = !this.cart[index].is;
        if (this.cart[index].is) {
          this.zong += this.cart[index].price * this.cart[index].num;
        } else {
          this.zong -= this.cart[index].price * this.cart[index].num;
        }
      },
    },
    filters: {
      fn(price, a) {
        return a + price.toFixed(2);
      },
    },
  });
</script>
